<template>
     <div>
      <!-- 表格 -->
      <!--tree-props 渲染嵌套数据的配置选项	  -->
        <el-table :tree-props="tp" class="table" v-loading="loading" :row-key="rowKey" border :data="data">
            <el-table-column
             :label="col.title"
             :prop="col.name" 
             :type="col.type" 
             :width="col.width"
             :align="col.align"
             v-for="(col,index) in cols" 
             :key="index"
             >
               <template v-if="col.slot" v-slot="{row,index}">
                    <slot :row="row" :index="index" :name="col.slot"></slot>
               </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
        class="page"
            v-if="value"
            @size-change="(v)=>change('pagesize',v)"
            @current-change="(v)=>change('pagenum',v)"
            :current-page="value.pagenum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="value.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
     </div>
</template>

<script>
    export default {
        name:"MyTable",
        methods: {
            /**
             * 分页或页码更改事件
             */
            change(key,value) {
               const obj={...this.value,[key]:value};
               this.$emit('input',obj);
               this.$emit('change',obj);
            }
        },
        props:{
            /**
             * 嵌套配置项
             */
            tp:{
              type:Object,
            //默认值
              default:()=>({ hasChildren: 'hasChildren', children: 'children' })
            },
            /**
             * loading
             */
            loading:Boolean,
            /**
             * 列
             */
            cols:{
                required:true,
                type:Array,
                default:()=>[],
            },
            /**
             * 数据
             */
            data:{
                 required:true,
                 type:Array,
                 default:()=>[],
            },
            /**
             * 分页对象（传入刚开启分页）
             */
            value:Object,
            /**
             * 总条数
             */
            total:Number,
            /**
             * rowKey
             */
            rowKey:{
                type:String,
                default:"id"
            }
        },
    }
</script>

<style scoped>
.page{
    margin-top : 10px;
    margin-bottom: 10px;
}
</style>